// pages/menu/menu.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    arry: [
      "/images/banner/menubanner1.jpg",
      "/images/banner/menubanner2.jpg",
      "/images/banner/menubanner3.jpg"
    ],
    indicatorDots: false,
    autoplay: true,
    circular: true,
    num: 0,
    rightViewId: '',
    currentIndex: 0,
    navList: [{
        id: "0",
        c_name: '人气Top',
        list: [{
            id: 1,
            url: '/images/menu/1-1.jpg',
            goodsName: '拿铁',
          },
          {
            id: 2,
            url: '/images/menu/1-1.jpg',
            goodsName: '桃桃芝士红宝石茶',
          },
          {
            id: 3,
            url: '/images/menu/1-1.jpg',
            goodsName: '咖啡风味安慕希',
          },
          {
            id: 4,
            url: '/images/menu/1-1.jpg',
            goodsName: '陨石拿铁',
          },
          {
            id: 5,
            url: '/images/menu/1-1.jpg',
            goodsName: '冲绳拿铁',
          }
        ]
      },
      {
        id: "1",
        c_name: '大师咖啡',
        list: [{
            id: 1,
            url: '/images/menu/1-1.jpg',
            goodsName: '冲绳黑糖拿铁',
          },
          {
            id: 2,
            url: '/images/menu/1-1.jpg',
            goodsName: '陨石拿铁',
          },
          {
            id: 3,
            url: '/images/menu/1-1.jpg',
            goodsName: '拿铁',
          },
          {
            id: 4,
            url: '/images/menu/1-1.jpg',
            goodsName: '香草拿铁',
          },
          {
            id: 5,
            url: '/images/menu/1-1.jpg',
            goodsName: '焦糖拿铁',
          },
        ]
      },
      {
        id: "2",
        c_name: '小鹿茶精选',
        list: [{
            id: 1,
            url: '/images/menu/1-1.jpg',
            goodsName: '标准美式',
          },
          {
            id: 2,
            url: '/images/menu/1-1.jpg',
            goodsName: '加浓美式',
          },
          {
            id: 3,
            url: '/images/menu/1-1.jpg',
            goodsName: '焦糖标准美式',
          },
          {
            id: 4,
            url: '/images/menu/1-1.jpg',
            goodsName: '焦糖加浓美式',
          },
          {
            id: 5,
            url: '/images/menu/1-1.jpg',
            goodsName: '银河气泡美式',
          },
        ]
      },
      {
        id: "3",
        c_name: '瑞纳冰',
        list: [{
            id: 1,
            url: '/images/menu/1-1.jpg',
            goodsName: '楽岛桃桃冰',
          },
          {
            id: 2,
            url: '/images/menu/1-1.jpg',
            goodsName: '巧克力瑞纳冰',
          },
          {
            id: 3,
            url: '/images/menu/1-1.jpg',
            goodsName: '抹茶瑞纳冰',
          },
          {
            id: 4,
            url: '/images/menu/1-1.jpg',
            goodsName: '卡布奇诺瑞纳冰',
          },
          {
            id: 5,
            url: '/images/menu/1-1.jpg',
            goodsName: '咖啡瑞纳冰',
          },
        ]
      },
      {
        id: "4",
        c_name: '鲜榨果蔬汁',
        list: [{
            id: 1,
            url: '/images/menu/1-1.jpg',
            goodsName: 'NFC鲜榨橙汁',
          },
          {
            id: 2,
            url: '/images/menu/1-1.jpg',
            goodsName: 'NFC鲜榨西柚汁',
          },
          {
            id: 3,
            url: '/images/menu/1-1.jpg',
            goodsName: '猕猴桃复合果汁',
          },
          {
            id: 4,
            url: '/images/menu/1-1.jpg',
            goodsName: 'NFC鲜榨蓝莓草莓混合果汁',
          },
          {
            id: 5,
            url: '/images/menu/1-1.jpg',
            goodsName: 'NFC鲜榨芒果汁',
          },
        ]
      },
      {
        id: "5",
        c_name: '经典饮品',
        list: [{
            id: 1,
            url: '/images/menu/1-1.jpg',
            goodsName: '巧克力',
          },
          {
            id: 2,
            url: '/images/menu/1-1.jpg',
            goodsName: '纯牛奶',
          },
          {
            id: 3,
            url: '/images/menu/1-1.jpg',
            goodsName: '巴黎水330ml',
          },
          {
            id: 4,
            url: '/images/menu/1-1.jpg',
            goodsName: '小红莓苏打水',
          },
          {
            id: 5,
            url: '/images/menu/1-1.jpg',
            goodsName: '苏打水',
          },
        ]
      },
      {
        id: "6",
        c_name: '健康轻食',
        list: [{
            id: 1,
            url: '/images/menu/1-1.jpg',
            goodsName: '京味烤鸭鲜蔬卷',
          },
          {
            id: 2,
            url: '/images/menu/1-1.jpg',
            goodsName: '夏威夷菠萝火腿卷',
          },
          {
            id: 3,
            url: '/images/menu/1-1.jpg',
            goodsName: '火腿芝士羊角',
          },
          {
            id: 4,
            url: '/images/menu/1-1.jpg',
            goodsName: '鸡肉卷',
          },
          {
            id: 5,
            url: '/images/menu/1-1.jpg',
            goodsName: '老北京鸡肉卷',
          },
        ]
      }

    ],
  },
  // 左侧点击菜单，右侧菜品，自动滚动到相对应的区域
  changeMenu(e) {
    wx.clearStorage(); // 清除缓存
    //console.log(e)
    let rightViewId = e.currentTarget.dataset.id; //通过e取到当前所点击的分类菜单的id;
    let currentIndex = e.currentTarget.dataset.i;
    this.setData({ //通过数据返回，直接将id渲染到scroll-into-view对应的值里
      rightViewId, //返回到右侧菜单scroll-into-view 对应的值
      currentIndex //返回左侧菜单scroll-into-view  对应的值
    })
    //console.log(rightViewId)
    //console.log(currentIndex)
  },
  //滑动到我右侧固定的区域--显示左侧对应的高光区域
  getScroll(e) {
    let that = this;
    let sTop = e.detail.scrollTop; //通过e获取右侧菜单，滚到顶部，隐藏部分的高度
    //console.log(sTop)
    let navList = that.data.navList; //这是一个数组，包含所有菜类和该分类下菜品
    let sumHeight = 0; //自定义一个变量，用来存放每个菜单和菜品的高度(滑动到顶部的))
    for (let index in navList) { //循环所有菜类和菜品
      index = navList[index] //navList数组里面索引值所对应的菜单，如果index=0就是人气Top菜单。。
      let dishSize = index.list.length; //菜单里面菜品的数量
      //console.log(dishSize) 5
      sumHeight += 30 + parseInt(dishSize / 3 * 70);
      //用于定义的变量加等于 每个菜单标题的高度（30）+每个菜单下菜品的数量（dishSize）/3*每个菜品的高度（70）sumHeight就是右侧每个菜单的总高度
      //console.log( sumHeight)
      if (sTop <= sumHeight) { //判断当前滚动到顶部隐藏的高度如果小于等于右侧每个菜单的总高度，那就把当前高度的菜单的id传给左侧菜单对应的ID，显示高亮
        let id = index.id;
        this.setData({
          currentIndex: id
        })
        break
      }
    }
  },
  swiperFn(e) {
    this.setData({
      num: e.detail.current
    })
    //console.log(e)
    // 找到轮播当前滑动的图片的索引值0，1，2，3
  }
})